<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
    <head th:replace="lib :: common_header"></head>
    <body>
        <div th:replace="lib :: header_box"></div>
        <div th:replace="lib :: menu_box (21)"></div>

        <div class="main-box">
            <div class="main-container">
                <div th:replace="lib :: main_container_header ('基础设施', '申请虚拟桌面')"></div><!-- /main_container_header -->
                <div class="f14" id="app" v-cloak>
                    <br>

                    <!--<div class="row">
                        <el-form label-width="130px" inline="true">
                            <el-form-item label="虚拟桌面编号">
                                <el-input></el-input>
                            </el-form-item>
                            <el-form-item label="虚拟桌面状态">
                                <el-select placeholder="请选择">
                                    <el-option
                                            v-for="item in deviceStatus"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="default">查询</el-button>
                            </el-form-item>
                        </el-form>
                    </div>--><!-- /row -->
                    <div class="row">
                        <div class="col-sm-12">
                            <button class="btn btn-primary" @click="openDeviceBox()">申请虚拟桌面</button> <br>
                            <div class="mt10">
                                <template>
                                    <el-table
                                            ref="deviceTable"
                                            highlight-current-row
                                            :data="deviceData"
                                            border
                                            @current-change="deviceHandleTableChange"
                                            style="width: 100%">
                                        <el-table-column
                                                prop="id"
                                                label="虚拟桌面编号"
                                                width="110">
                                        </el-table-column>
                                        <el-table-column
                                                prop="status"
                                                label="虚拟桌面状态"
                                                width="110">
                                            <template slot-scope="scope">
                                                {{ scope.row.status | changeDeviceStatus }}
                                            </template>
                                        </el-table-column>
                                        <el-table-column
                                                prop="apply_user_name"
                                                label="申请人"
                                                width="110">
                                        </el-table-column>
                                        <el-table-column
                                                prop="apply_start"
                                                label="开始时间"
                                                width="160">
                                        </el-table-column>
                                        <el-table-column
                                                prop="apply_end"
                                                label="结束时间"
                                                width="160">
                                        </el-table-column>
                                        <el-table-column
                                                label="操作">
                                            <template slot-scope="scope">
                                                <div class="pen ie_dib tc"
                                                     @click="deviceHandleEdit(scope.$index, scope.row)">
                                                    <em class="el-icon-edit"></em>
                                                </div>
                                                &nbsp;&nbsp;
                                                <div class="pen ie_dib tc"
                                                     @click="deviceHandleView(scope.$index, scope.row)">
                                                    <em class="el-icon-view"></em>
                                                </div>
                                            </template>
                                        </el-table-column>
                                    </el-table>
                                </template>
                            </div>
                            <div class="tr">
                                <el-pagination
                                        small
                                        layout="prev, pager, next"
                                        :page-size="devicePageSize"
                                        :total="deviceDataFromDB.length"
                                        v-on:current-change="handleDevicePageChange">
                                </el-pagination>
                            </div>
                        </div><!-- /col-sm-3 -->

                    </div><!-- /row -->

                    <el-dialog title="申请虚拟桌面" :visible.sync="dialogVisible1">
                        <div class="zu">
                            <el-form :model="deviceForm" :rules="deviceRules" ref="deviceForm" label-width="130px">
                                <el-form-item label="使用时间" required>
                                    <el-date-picker
                                            v-model="deviceDate"
                                            type="datetimerange"
                                            :default-time="['00:00:00', '23:59:59']"
                                            @change="setTime"
                                            range-separator="至"
                                            start-placeholder="开始时间"
                                            end-placeholder="结束时间">
                                    </el-date-picker>
                                </el-form-item>
                                <el-form-item label="申请备注" prop="apply_remark">
                                    <el-input
                                            type="textarea"
                                            :rows="5"
                                            placeholder="请输入内容"
                                            v-model="deviceForm.apply_remark">
                                    </el-input>
                                </el-form-item>


                                <el-form-item>
                                    <el-button @click="dialogVisible1 = false">取 消</el-button>
                                    <el-button type="primary" @click="saveDevice('deviceForm')">确 定</el-button>
                                </el-form-item>
                            </el-form>
                        </div><!-- /zu -->
                        <span slot="footer" class="dialog-footer">
                        </span>
                    </el-dialog>

                    <el-dialog title="查看虚拟桌面" :visible.sync="dialogVisible2">
                        <div class="zu">
                            <el-form :model="deviceForm" ref="deviceFormView" label-width="130px">
                                <el-form-item label="访问地址" prop="access_address">
                                    <el-input v-model="deviceForm.access_address" :disabled="true"></el-input>
                                </el-form-item>
                                <el-form-item label="访问信息" prop="access_info">
                                    <el-input v-model="deviceForm.access_info" :disabled="true"></el-input>
                                </el-form-item>
                                <el-form-item label="备注" prop="remark">
                                    <el-input
                                            type="textarea"
                                            :rows="5"
                                            placeholder="请输入内容"
                                            v-model="deviceForm.remark" :disabled="true">
                                    </el-input>
                                </el-form-item>

                                <el-form-item>
                                    <el-button @click="dialogVisible2 = false">取 消</el-button>
                                </el-form-item>
                            </el-form>
                        </div><!-- /zu -->
                        <span slot="footer" class="dialog-footer">
                        </span>
                    </el-dialog>

                </div><!-- /app -->
            </div>
        </div>
        <div th:replace="lib :: javascript_box"></div>
        <script th:src="@{/lib/console/vdi_user_index.js}"></script>
    </body>
</html>